<template>
  <div class="auth-container">
    <div class="auth-form">
      <h2>注册</h2>
      <div class="form-group">
        <label for="role">选择身份</label>
        <select v-model="role" id="role">
          <option value="student">学生</option>
          <option value="teacher">教师</option>
          <option value="developer">开发者</option>
        </select>
      </div>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" v-model="username" id="username" placeholder="用户名" />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="password" id="password" placeholder="密码" />
      </div>
      <div class="form-group">
        <label for="confirm-password">确认密码</label>
        <input type="password" v-model="confirmPassword" id="confirm-password" placeholder="确认密码" />
      </div>
      <button @click="register">注册</button>
      <button @click="goToLogin">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: 'student',
      username: '',
      password: '',
      confirmPassword: '',
    };
  },
  methods: {
    register() {
      // 验证密码是否一致
      if (this.password !== this.confirmPassword) {
        alert('两次输入的密码不一致，请重新输入');
        return;
      }

      // 发送注册请求
      fetch('http://localhost:8080/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: this.username,
          password: this.password,
          role: this.role,
        }),
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常：' + response.status);
        }
        return response.json();
      })
      .then(res => {
        if (res.code == '200') {
          // 注册成功
          alert('注册成功');
          this.$router.push('/');
          
        } else {
          // 注册失败，显示错误信息
          alert(res.msg);
        }
      })
      .catch(error => {
        alert('注册失败，请检查网络或联系管理员');
        console.error('注册请求失败:', error);
      });
    },
    goToLogin() {
      this.$router.push('/login');
    },
  },
};
</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../assets/e4acaeba32582a57c0bb1c518142915.jpg');
  background-size: cover;
  background-position: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 20px;
  border-radius: 10px;
  background: #282c34;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #3e4452;
  border-radius: 5px;
  background: #3e4452;
  color: #ffffff;
  font-size: 14px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: #61dafb;
  color: #282c34;
  border: none;
  border-radius: 5px;
  margin: 5px 0;
  transition: background 0.3s;
}

button:hover {
  background: #4a90e2;
}
</style>